<template>
  <div>
    <div class="article-banner d-flex justify-center align-center">
      <div class="text-title" style="text-shadow: 2px 2px #4CAF50;">
        {{ article.articleTitle }}
      </div>
    </div>
    <v-container class="article-body">
      <v-row>
        <v-col md="3" cols="12" class="animate__animated animate__fadeInLeft">
          <div style="position: sticky;top: 10px">
            <v-card class="pa-6 mx-auto text-center grey lighten-3">
              <div class="right-side">
                <div class="title mb-3">目录</div>
                <div class="toc" ref="toc"></div>
                <div v-if="tocFlag">暂无目录</div>
              </div>
            </v-card>
            <WebsiteMessage :userInfo="user"></WebsiteMessage>
          </div>
        </v-col>
        <v-col md="9" cols="12" class="animate__animated animate__backInRight">
          <v-card class="grey lighten-3 mx-auto pa-md-10 pa-3">
            <div v-html="article.articleContent" v-highlight class="article-content" ref="articleContent"></div>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import {marked} from "marked";
import tocbot from 'tocbot'
import WebsiteMessage from "@/components/rightSide/WebsiteMessage";

export default {
  name: "Article",
  components: {WebsiteMessage},
  methods: {
    initArticle() {
      this.getRequest(this.api.article + this.$route.query.id).then(res => {
        if (res) {
          this.article = res.data
          this.article.articleContent = marked(this.article.articleContent)
          // console.log(res)

          //生成目录
          let article = this.$refs.articleContent.children
          this.$nextTick(() => {
            let h2count = 0,h3count = 1
            for (let i = 0; i < article.length; i++) {
              if (article[i].tagName.startsWith('H')) {
                article[i].id = i
                this.tocFlag = false
                //生成序号
                if (article[i].tagName.startsWith('H2')){
                  h3count=1
                  article[i].innerHTML = (h2count++)+1 + "、" +article[i].innerHTML
                }else if(article[i].tagName.startsWith('H3')){
                  article[i].innerHTML = h2count+ '.' + (h3count++) + "、" +article[i].innerHTML
                }
              }
            }

            tocbot.init({
              tocSelector: ".toc", //要把目录添加元素位置，支持选择器
              contentSelector: ".article-content", //获取html的元素
              headingSelector: "h1, h2, h3, h4", //要显示的id的目录
              hasInnerContainers: true,
              onClick: function (e) {
                e.preventDefault();
              }
            });
          })
        }
      })
    },
  },
  data() {
    return {
      tocFlag:true,
      article: {}
    }
  },
  created() {
    this.initArticle()
  },
  destroyed() {
    tocbot.destroy();
  },
  computed: {
    user() {
      return this.$store.state.user
    }
  }
}
</script>

<style scoped>

@media (min-width: 760px) {
  .article-body {
    margin: 220px auto 150px auto;
    max-width: 80%;
  }
}

@media (max-width: 759px) {
  .article-body {
    margin: 220px auto 0 auto;
    max-width: 99%;
  }
}

.toc {
  text-align: left;
}

.toc:hover {
  cursor: default;
}

.article-banner {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: url("../../assets/img/home.png");
}
</style>